<template>  
    <div class="service-module">  
      <h2>服务模块</h2>  
    
      <!-- 农产品质量追溯 -->  
      <div class="service-section">  
        <h3>农产品质量追溯</h3>  
        <p>通过扫描产品上的二维码，可以追溯到农产品的生产源头、种植过程、质量检测等信息。</p>  
        <button @click="showTraceabilityDialog = true">查看追溯信息</button>  
          
        <!-- 追溯信息对话框 -->  
        <div v-if="showTraceabilityDialog" class="dialog">  
          <div class="dialog-content">  
            <h4>追溯信息</h4>  
            <p>产品编号: ABC123</p>  
            <p>生产源头: 某某农场</p>  
            <p>种植过程: 使用了有机肥料，无农药残留</p>  
            <p>质量检测: 符合国家标准</p>  
            <button @click="showTraceabilityDialog = false">关闭</button>  
          </div>  
        </div>  
      </div>  
    
      <!-- 农技服务 -->  
      <div class="service-section">  
        <h3>农技服务</h3>  
        <p>提供专业的农业技术咨询、病虫害诊断、种植指导等服务。</p>  
        <button @click="showTechServiceDialog = true">咨询农技服务</button>  
          
        <!-- 农技服务对话框 -->  
        <div v-if="showTechServiceDialog" class="dialog">  
          <div class="dialog-content">  
            <h4>农技服务咨询</h4>  
            <p>请输入您的问题:</p>  
            <textarea v-model="techServiceQuestion" placeholder="描述您的问题..."></textarea>  
            <button @click="submitTechServiceQuestion">提交问题</button>  
            <button @click="showTechServiceDialog = false">取消</button>  
          </div>  
        </div>  
      </div>  
    
      <!-- 农产品营销 -->  
      <div class="service-section">  
        <h3>农产品营销</h3>  
        <p>提供农产品营销策划、品牌推广、销售渠道拓展等服务。</p>  
        <button @click="showMarketingDialog = true">了解营销服务</button>  
          
        <!-- 营销信息对话框 -->  
        <div v-if="showMarketingDialog" class="dialog">  
          <div class="dialog-content">  
            <h4>农产品营销服务</h4>  
            <p>我们的营销团队将为您的农产品量身定制营销策略，提升品牌知名度和销量。</p>  
            <button @click="showMarketingDialog = false">关闭</button>  
          </div>  
        </div>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        showTraceabilityDialog: false,  
        showTechServiceDialog: false,  
        showMarketingDialog: false,  
        techServiceQuestion: '',  
      };  
    },  
    methods: {  
      submitTechServiceQuestion() {  
        if (this.techServiceQuestion.trim()) {  
          alert('您的农技服务问题已提交，我们将尽快回复。');  
          this.techServiceQuestion = '';  
          this.showTechServiceDialog = false;  
        } else {  
          alert('请输入您的问题。');  
        }  
      },  
    },  
  };  
  </script>  
    
    <style scoped>  
    /* 全局样式设置 */  
    body {  
      font-family: Arial, sans-serif;  
      background-color: #f8f9fa;  
      color: #343a40;  
    }  
    
    .service-module {  
      max-width: 800px;  
      margin: 0 auto;  
      padding: 20px;  
      background-color: #ffffff;  
      border: 1px solid #dee2e6;  
      border-radius: 8px;  
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
      box-sizing: border-box;  
    }  
    
    .service-section {  
      margin-bottom: 20px;  
    }  
    
    .service-section h3 {  
      margin-top: 0;  
    }  
    
    /* 按钮样式优化 */  
    button {  
      padding: 10px 15px;  
      background-color: #007bff;  
      color: white;  
      border: none;  
      border-radius: 5px;  
      cursor: pointer;  
      margin-top: 10px;  
      transition: background-color 0.3s, box-shadow 0.3s;  
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
    }  
    
    button:hover {  
      background-color: #0056b3;  
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  
    }  
    
    /* 对话框样式优化 */  
    .dialog {  
      position: fixed;  
      top: 50%;  
      left: 50%;  
      transform: translate(-50%, -50%);  
      background-color: rgba(255, 255, 255, 0.95); /* 增加透明度 */  
      border: 1px solid #dee2e6;  
      border-radius: 8px;  
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);  
      z-index: 1000;  
      width: 90%;  
      max-width: 400px;  
      overflow: hidden; /* 防止内容溢出 */  
    }  
    
    .dialog::before {  
      content: '';  
      position: absolute;  
      top: 0;  
      left: 0;  
      right: 0;  
      bottom: 0;  
      background: rgba(0, 0, 0, 0.1);  
      filter: blur(10px);  
      z-index: -1; /* 置于内容之下 */  
    }  
    
    .dialog-content {  
      padding: 20px;  
    }  
    
    /* 文本区域样式优化 */  
    textarea {  
      width: 100%;  
      height: 80px;  
      padding: 10px;  
      box-sizing: border-box;  
      margin-top: 10px;  
      border: 1px solid #ced4da;  
      border-radius: 5px;  
      resize: none; /* 禁止调整大小 */  
    }  
    
    textarea:focus {  
      outline: none;  
      border-color: #80bdff;  
      box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);  
    }  
  </style>